import React, { memo, useEffect, useCallback, useRef } from 'react';
import { withRouter } from 'react-router';
import { isJDAPP, isWXSQ } from '@/common/utils';
import logoImg from '@/assets/images/logo.png';
import './index.less';

interface IIndexProps {
  history: any;
}

const addRenderBTStyl = (
  txt: string,
  extraParmas: { prefixStr?: string; endStr?: string } = {}
) => {
  const { prefixStr = '', endStr = '' } = extraParmas;
  return (
    prefixStr +
    txt
      .split('')
      .reduce(
        (curr, item, idx) =>
          (curr += `<span class='bt'>${item}<span class='bt-border'></span></span>`),
        ''
      ) +
    endStr
  );
};

/**
 * 短信跳转首次进入: \(^o^)/~
 *    H5 进入自动唤起APP跳转
 *    APP跳转实名信息补充页-点击按钮跳转登录确认
 * @param props
 * @returns
 */
const Index = (props: IIndexProps) => {
  const btnRef: React.MutableRefObject<any> = useRef(null);
  const handleOpenAppRouterAction = useCallback(() => {
    if (isJDAPP) {
      props.history.replace(`/confirm${window.location.search}`);
      return;
    }
    try {
      window['$'].downloadAppPlugIn({
        inteneUrl: `openApp.jdMobile://virtual?`,
        M_sourcefrom: 'mxz',
        inteneUrlParams: {
          category: 'jump',
          des: 'm',
          // 预发测试跳转APP内地址
          // url: `https://yeah.jd.com/card-resale-jwxd/usual${
          //   window.location.search.includes('?')
          //     ? window.location.search + '&'
          //     : '?'
          // }ad_od=1`

          // 线上跳转APP内地址
          url: `https://jwxd.jd.com${
            window.location.search.includes('?')
              ? window.location.search + '&'
              : '?'
          }ad_od=1`
        },
        openAppBtnId: 'openApp-btn'
      });
    } catch (err) {
      console.log('唤起报错');
    }
  }, [props.history]);

  useEffect(() => {
    if (!isJDAPP) {
      if (btnRef && btnRef.current) {
        // 需要触发两次点击才能进行DOM事件的触发
        btnRef.current.click();
        btnRef.current.click();
      }
    } else {
      // 京东APP内判断是否登录
      const JSSDK = window['JSSDK'];
      JSSDK.Isv.isAppLogin((res: any) => {
        setTimeout(() => {
          if (String(res.data) === '0') {
            // 未登录状态
            const LOGIN_URL = isWXSQ()
              ? `https://wq.jd.com/pinbind/pintokenredirect?scope=1&biz=${process
                  .env.REACT_APP_BIZ || 'activitycollector'}&url=`
              : `//plogin.m.jd.com/user/login.action?appid=${process.env
                  .REACT_APP_APPID || 773}&returnurl=`;
            window.location.href =
              LOGIN_URL + encodeURIComponent(window.location.href);
          }
        }, 0);
      });
    }
    return;
  }, []);

  return (
    <div className="idx-wrapper">
      <div className="idx-title">
        <img src={logoImg} alt="logo" className="idx-title-logo" />
        <div className="idx-title-h1">京东通信实名信息补充</div>
      </div>
      <div className="idx-desc">
        <div className="idx-desc-item">
          <div className="idx-desc-item-tip">
            <span className="idx-desc-item-tip-icon">1</span>
            <span className="idx-desc-item-tip-label">相关背景</span>
          </div>
          <div className="idx-desc-item-content">
            <p className="txt">
              为贯彻落实电话用户真实身份信息登记实施规范，且推进防范治理电信网络诈骗指导意见，经筛查未符合实名制登记的京东通信历史入网客户需完成实名信息补充。
            </p>
            <p
              className="txt"
              dangerouslySetInnerHTML={{
                __html: addRenderBTStyl(
                  '上传订单入网人的有效身份证正面、反面、个人免冠照片，并进行视频活体认证。',
                  {
                    prefixStr: '您需要在京东APP中打开此链接，',
                    endStr: '您的个人信息京东将严格保密。'
                  }
                )
              }}
            ></p>
          </div>
        </div>
        <div className="idx-desc-item">
          <div className="idx-desc-item-tip">
            <span className="idx-desc-item-tip-icon">2</span>
            <span className="idx-desc-item-tip-label">
              不补充会出现什么问题
            </span>
          </div>
          <div className="idx-desc-item-content">
            <p
              className="txt"
              dangerouslySetInnerHTML={{
                __html: addRenderBTStyl(
                  '收到短信通知后及时完成实名信息补充，您的京东通信号码将可能被停机处理。',
                  { prefixStr: '若您未在' }
                )
              }}
            ></p>
          </div>
        </div>
        <div className="idx-desc-item">
          <div className="idx-desc-item-tip">
            <span className="idx-desc-item-tip-icon">3</span>
            <span className="idx-desc-item-tip-label">
              实名信息补充操作步骤
            </span>
          </div>
          <div className="idx-desc-item-content">
            <p className="txt">第一步，使用您的京东通信号码完成登录验证；</p>
            <p className="txt">
              第二步，上传京东通信号码入网人实名制照片，包括身份证正面照片，反面照片，以及个人正面免冠照；
            </p>
            <p className="txt">第三步，进行视频活体认证。</p>
            <p className="txt">第四步，视频上传。</p>
            <p className="txt">第五步，审核视频，等待结果。</p>
          </div>
        </div>
        <div className="idx-desc-item">
          <div className="idx-desc-item-tip">
            <span className="idx-desc-item-tip-icon">4</span>
            <span className="idx-desc-item-tip-label">遇到问题如何求助</span>
          </div>
          <div className="idx-desc-item-content">
            <p className="txt">遇到任何问题，请拨打客服电话：4006710023</p>
          </div>
        </div>
        <div className="idx-desc-item">
          <div className="idx-desc-item-tip">
            <span className="idx-desc-item-tip-icon">5</span>
            <span className="idx-desc-item-tip-label">
              点击下方按钮打开京东App进行操作
            </span>
          </div>
          <div className="idx-desc-item-content">
            <p
              className="txt"
              dangerouslySetInnerHTML={{
                __html: addRenderBTStyl(
                  '若您当前的浏览器无法唤起京东App，请尝试更换浏览器重新尝试。'
                )
              }}
            ></p>
          </div>
        </div>
      </div>

      <div className="idx-footer">
        <div
          ref={btnRef}
          className="idx-footer-btn"
          onClick={handleOpenAppRouterAction}
          id="openApp-btn"
        >
          {isJDAPP ? '下一步' : '打开京东APP'}
        </div>
      </div>
    </div>
  );
};

export default withRouter(memo(Index));
